<template>
    <div class="bod">
        <div class="image">
            <img src="../assets/img/1664345067715.jpg" alt="头像">
        </div>
        <div class="form-main">
            <form>
                <input type="text" v-model="username" class="account"><br>
                <input type="password" v-model="password" class="psw" ><br>
                <input type="radio" class="opt" v-model="check" value="1"><span>已阅读并同意服务协议和隐私保护指引</span>
            </form>
        </div>
        <div class="togo">
            <button><van-icon name="arrow" :size="30" color="white" @click="onSubmit"/></button>
        </div>
        <div class="more">
            <ul>
                <li><p>手机号登录</p></li>
                <li><router-link to="/regist">新用户注册</router-link></li>
                <li><p>更多选项</p></li>
            </ul>
        </div>
    </div>
    
</template>
<script>
export default {
        data () {
        return {
            username:"",
            password:"",
            check:"0"
        }
    },
    methods: {
        onSubmit(){
                const { userInfo } = this.$store.state;
                console.log(userInfo);
                const _this=this
                if(this.check!=1){
                    this.$notify({
                        type: "warning",
                        message: "请先同意服务协议",
                        duration: 2000,
                    });
                    return
                }
            if (
                userInfo.account === this.username &&
                userInfo.password === this.password
            ) {
                this.$notify({
                    type: "success",
                    message: "登录成功！跳转到首页",
                    duration: 2000,
                    onClick() {
                        _this.$router.push("/house");
                    },
                    onClose() {
                        _this.$router.push("/house");
                    },
                });
            } else {
                this.$notify({
                    type: "warning",
                    message: "账号或密码错误，请重新登录",
                    duration: 2000,
                });
            }
        }
    }
}
</script>


<style lang="scss" scoped>
.bod{
    height: 100vh;
    overflow: hidden;
    // background-image:linear-gradient(
    //     #f5abab 0%,
    //     #f7e1e4 80%,
    //     #f4f4f4 100%
    // );
    background-image: linear-gradient(to top, #feada6 0%, #f5efef 100%);
    .image{       
        margin: 100px auto 40px;
        width: 100px;
        height: 100px;
        img{
            width: 100%;
            height: 100%;
            border-radius: 20px;
        }
    }
    .form-main{
        text-align: center;
        form{
            .account,.psw{
                margin: 10px auto;
                width: 180px;
                height: 30px;
                border-radius: 20px;
                text-align: center;
                border: 1px solid #f07676;
            }
            .opt{
                width: 12px;
                height: 12px;
            }
            span{
                font-size: 12px;
                color: rgb(33, 33, 33);
            }
        }
    }
    .togo{
        margin: 50px 0;
        text-align: center;
        button{
            border: 0;
            border-radius: 50%;
            width: 60px;
            height: 60px;
            background-color: #f07676;
        }
    }
    .more{
        position: relative;
        bottom: -20%;
        ul{
            display: flex;
            justify-content: space-between;
            align-items: center;
            
            li{
                font-size: 12px;
            }
        }
    }
}
</style>